<template>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="24">
        <!-- 搜索框 -->
<!--        <el-col :span="5">-->
<!--          <el-input v-model="searchText" placeholder="请输入用户名" clearable @change="search"></el-input>-->
<!--        </el-col>-->

        <el-col :span="3">
          <el-input v-model="listQuery.nickname" placeholder="请输入用户昵称" clearable @change="search"></el-input>
        </el-col>

        <el-col :span="2">
          <el-select v-model="listQuery.status" placeholder="状态">
            <el-option
              v-for="item in status_options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col  :span="16">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-col>

        <el-col :span="3" class="add">
          <el-button type="success" @click="handleAdd" v-if="false">增加用户</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="filter-container">
      <el-checkbox v-model="formThead.nickname" label="昵称">昵称</el-checkbox>
      <el-checkbox v-model="formThead.avatar" label="头像">头像</el-checkbox>
      <el-checkbox v-model="formThead.status" label="状态">状态</el-checkbox>
      <el-checkbox v-model="formThead.sex" label="性别">性别</el-checkbox>
      <el-checkbox v-model="formThead.province" label="所属省份">所属省份</el-checkbox>
      <el-checkbox v-model="formThead.city" label="所属城市">所属城市</el-checkbox>
      <el-checkbox v-model="formThead.privilege" label="用户特权信息">用户特权信息</el-checkbox>
      <el-checkbox v-model="formThead.performance" label="个人业绩">个人业绩</el-checkbox>
    </div>

    <el-table :data="customerList" class="table" border :key="customerList.length"
              v-loading="loading"
              element-loading-text="拼命加载中....">

      <el-table-column label="昵称" align="center" v-if="formThead.nickname">
        <template slot-scope="{row}">
          <span>{{row.nickname}}</span>
        </template>
      </el-table-column>

      <el-table-column label="头像" align="center" v-if="formThead.avatar">
        <template slot-scope="{row}">
          <img v-if="row.avatar !== '' && row.avatar !== null"
            :src="row.avatar" @click="bigImage(row.avatar)">
          <span v-else>
            没有图片
          </span>
        </template>
      </el-table-column>


      <el-table-column prop="tag" label="状态" align="center" v-if="formThead.status">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'primary' : 'danger'" disable-transitions>
            {{scope.row.status === 1 ? '启用':'停用'}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="性别" align="center" v-if="formThead.sex">
        <!--   1时是男性，值为2时是女性，值为0时是未知     -->
        <template slot-scope="{row}" v-if="row.customer_wechat.length>0">
          <span v-if="row.customer_wechat[0].sex === 1" style="color: #409EFF">男</span>
          <span v-else-if="row.customer_wechat[0].sex === 2" style="color: red">女</span>
          <span v-else-if="row.customer_wechat[0].sex === 0" style="color: #909399">未知</span>

        </template>
      </el-table-column>

      <el-table-column label="省份" align="center" v-if="formThead.province">
        <template slot-scope="{row}">
          <span v-if="row.customer_wechat.length>0">{{row.customer_wechat[0].province}}</span>
        </template>
      </el-table-column>

      <el-table-column label="城市" align="center" v-if="formThead.city">
        <template slot-scope="{row}">
          <span v-if="row.customer_wechat.length>0">{{row.customer_wechat[0].city}}</span>
        </template>
      </el-table-column>

<!--      <el-table-column label="headimgurl" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--&lt;!&ndash;          <span>{{row.headimgurl}}</span>&ndash;&gt;-->
<!--          <img :src="row.headimgurl" alt="暂无头像">-->
<!--        </template>-->
<!--      </el-table-column>-->

      <el-table-column label="用户特权信息" align="center" v-if="formThead.privilege">
        <template slot-scope="{row}">
          <span>{{row.privilege}}</span>
        </template>
      </el-table-column>

      <el-table-column label="个人业绩" align="center" v-if="formThead.performance">
        <template slot-scope="{row}">
          <i class="el-icon-view" @click="showPerformance(row)"></i>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleEdit(row)" v-if="false" >编辑</el-button>
          <el-button type="danger" size="mini" @click="openDelete(row.customer_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <transition name="el-zoom-in-top">
      <div v-show="bigImageSrc !== null && bigImageSrc!==''" class="bigImg" @click="bigImage(null)">
        <img :src="bigImageSrc" style="width:auto; height:400px;border-radius:5px;">
      </div>
    </transition>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,15,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>


    <add-customer ref="showAddDialog"/>
    <edit-customer ref="showEditDialog"/>
    <customer-performance ref="showCustomerPerformance"/>

  </div>
</template>

<script>
  import store from '@/store'
  import {list,del} from '@/api/thk/customer'
  import {list as getProvinceAndCityList} from '@/api/thk/city'


  import addCustomer from './add'
  import editCustomer from './edit'
  import customerPerformance from './customerPerformance'
  import {getCustomerPerformance} from '@/api/thk/performance'


  export default {
    name: 'Customer',
    components: {
      addCustomer,
      editCustomer,
      customerPerformance
    },

    data() {
      return {
        /**
         customer_id: 59
         nickname: "看风景时"
         avatar: "http://longwood.oss-cn-shenzhen.aliyuncs.com/user-admin_user-picture1589787890760"
         status: null
         date_added: "2020-05-08 09:31:19"
         date_modified: "2020-05-18 03:44:52"
         customer_wechat: Array(1)
           user_wechat_id: 10
           customer_id: 59
           openid: "o_qaX0jOVE-IfAphIcdmc4NCi48Y"
           nickname: "看风景时"
           sex: 1
           province: "18"
           city: "20"
           country: "中国"
           headimgurl: "http://longwood.oss-cn-shenzhen.aliyuncs.com/user-admin_user-picture1589787890760"
           privilege: null
           unionid: "oQAli5v3ZxYzrwfx61TLo6rTY4UM"
         */
        customerList: [],

        provinceAndCityList: [],
        cityList: [],

        bigImageSrc: null,

        formThead: {
          nickname: true,
          avatar: true,
          status: true,
          sex: true,
          province: true,
          city: true,
          privilege: true,
          performance: false,
        },


        listQuery: {
          nickname: undefined,
          status: undefined,
          page: 1,
          pagesize: 10
        },

        total: undefined,

        status_options: [{
          value: '0',
          label: '停用'
        }, {
          value: '1',
          label: '启用'
        }, {
          value: '',
          label: '全部'
        }],

        loading:true

      }
    },

    // created生命周期中调用查询question列表的方法
    created() {
      this.getCustomerList();
      // 获取省市数据
      this.getProvinceAndCityList()
    },

    updated: function () {
      this.$nextTick(function () {
        this.loading = false
      })
    },

    methods: {
      // 查询question列表
      getCustomerList(){
        list(store.getters.token, this.listQuery).then(res =>{
          this.total = res.data.list.total
          this.customerList = res.data.list.data
          console.log(this.customerList)
        },error => {
          console.log(error)
        })
      },

      // 触发增加按钮弹出增加问题对话框
      handleAdd(){
        // arg：是否点击了确定按钮
        this.$refs.showAddDialog.cancelSubmit()
      },




      // 触发编辑按钮.row是一行的数据，点击了哪一行，就是哪一行的数据，根据数据回显
      handleEdit(row){
        this.$refs.showEditDialog.showEditDialog(row,this.provinceAndCityList)
      },


      // 删除customer
      handleDelete(customer_id){
        del(store.getters.token, customer_id).then(res => {
          // 删除之后，需要重新渲染.重新查询数据，会根据数据的length重新渲染
          console.log("删除customer成功!")
          this.getCustomerList()

        }).catch(err => {
          console.log("删除customer失败")
        })
      },

      // 弹出是否删除对话框, then中调用handleDelete
      openDelete(customer_id) {
        this.$confirm('此操作将会删除用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(customer_id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },


      // 搜索功能
      search(){
        this.listQuery.page = 1
        this.getCustomerList()
      },

      // 获取省市数据
      getProvinceAndCityList(){
        getProvinceAndCityList(store.getters.token).then(res => {
          console.log('===== getProvinceList =====')

          this.provinceAndCityList = res.data.list
          // 获取全部数据的时候,将city的数据筛选出来
          this.getCityList()

          console.log(this.provinceAndCityList)
        }).catch(err => {
          console.log(err)
        })
      },

      // 根据省id返回省名称
      getProvinceName(id){
        let province = this.provinceAndCityList.find(province => {
          return province.province_id == id
        })

        if(province){
          return province.province
        }

        return ''
      },


      // 获取city数据数据
      getCityList(){
        let citys = []
        for(let province of this.provinceAndCityList){
          citys.push(...province.city)
        }

        this.cityList = citys
        console.log(this.cityList)
      },

      // 根据city id返回city名
      getCityName(id){
        let city = this.cityList.find(city => {
          return id == city.city_id
        })
        if(city){
          return city.city
        }
        return ''
      },


      // 大图弹窗函数
      bigImage(src) {
        if (src!==null) {
          this.$set(this, 'bigImageSrc', src)
          console.log(this.bigImageSrc)
        } else {
          this.$set(this, 'bigImageSrc', null)
        }
      },

      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getCustomerList()
      },

      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getCustomerList()
      },

      showPerformance(row){
        this.$refs.showCustomerPerformance.showCustomerPerformance(row.customer_id)
      },
    }
  }

</script>

<style scoped>
  img{
    height: 50px;
    width: 50px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
  }
  .filter-container{
    margin: 10px 0 0 20px;
  }
  .table{
    width: 98%;
    margin: 10px auto 0;
  }
  .add{
    position: relative;
    left: 25px;
    top: 35px;
  }
  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }

  i::before{
    /*display: inline-block;*/
    font-size: 20px;
    height: 18px;
    width: 18px;
  }

  i:hover{
    color: #409EFF;
  }

</style>
